<template>
  <div>
    <div class="findpwd">
      <el-container>
        <el-header>
          <p>登录>>找回密码</p>
        </el-header>
        <el-main>
          <el-header>
            <el-row :gutter="20">
              <el-col :span="14" :offset="5">
                <div class="grid-content bg-purple">
                  <el-steps :active="active" finish-status="success" align-center>
                    <el-step title="确认账号"></el-step>
                    <el-step title="验证码验证"></el-step>
                    <el-step title="重置密码"></el-step>
                  </el-steps>
                </div>
              </el-col>
            </el-row>
          </el-header>
          <el-header></el-header>
          <el-header>
            <el-row :gutter="24">
              <el-col :span="12" :offset="6">
                <div class="grid-content bg-purple">
                  <el-input v-model="input" :placeholder="placeholder"></el-input>
                </div>
              </el-col>
            </el-row>
          </el-header>
          <el-header>
            <el-row :gutter="24">
              <el-col :span="15" :offset="6">
                <div class="grid-content bg-purple">
                  <el-button type="primary" style="width:80%;" @click="next()">下一步</el-button>
                </div>
              </el-col>
            </el-row>
          </el-header>
        </el-main>
      </el-container>
    </div>
  </div>
</template>







<script>
export default {
  name: "findpwd",
  data() {
    return {
      input: "",
      active: 0,
      placeholder: "请输入绑定的邮箱号",
      userEmail: "",
      code: "", //验证码
      newPwd: ""
    };
  },

  methods: {
    next() {
      if (this.active > 2) this.active = 0;
      if (this.active === 2) {
        var str = this.input;
        var pattern = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,16}$/;
        if (pattern.test(str)) {
          this.axios({
            method: "post",
            params: {
              newPwd: this.input,
              email: this.userEmail
            },
            url: "http://localhost:8090/user/findPwd/reSetPwd"
          })
            .then(r => {
              this.$message("密码重置成功快去登录吧！");
              this.active++;
              this.$router.push("/bindex");
              //此处后端返回数据就是user对象---r.data
            })
            //出现异常后调取的方法
            .catch(error => {
              this.$message(error.response.data.message);
            });
        } else {
          this.$message({
            message:
              "密码格式错误，密码位数应该在8-16个，且字母、数字和标点符号至少包含两种",
            type: "warning"
          });
        }
      }
      if (this.active === 1) {
        (this.code = this.input), alert(this.code);
        this.axios({
          method: "get",
          params: {
            code: this.code,
            key: this.userEmail
          },
          url: "http://localhost:8090/user/findPwd/verifyCode"
        })
          .then(r => {
            this.$message("验证成功！");
            this.placeholder = "请输入新的密码";
            this.input = "";
            this.active++;
            //此处后端返回数据就是user对象---r.data
          })
          //出现异常后调取的方法
          .catch(error => {
            this.$message(error.response.data.message);
          });
      }
      //获取找回密码验证码
      if (this.active === 0) {
        this.userEmail = this.input;
        this.axios({
          method: "get",
          params: {
            email: this.userEmail
          },
          url: "http://localhost:8090/user/findPwd/getCode"
        })
          .then(r => {
            this.$message("验证码已发送，请及时查收！");
            this.code = r.data.code;
            this.placeholder = "请输入验证码";
            this.input = "";
            this.active++;
            //此处后端返回数据就是user对象---r.data
          })
          //出现异常后调取的方法
          .catch(error => {
            this.$message(error.response.data.message);
          });
      }
    }
  }
};
</script>
<style   scoped>
.findpwd {
  margin: 100px auto;
  background-color: rgb(187, 202, 233);
  width: 60%;
  height: 40%;
}
</style>